<template>
  <div class="content">
    <div class="header">
      <img
        width="100%"
        height="100%"
        src="../../assets/images/交班.png"
        alt=""
      />
    </div>
    <div class="main">
      <div class="avatar">
        <el-avatar :size="70" :src="userState.userInfo.avatar" />
      </div>
      <div class="user_info">
        <img class="img" src="../../assets/images/收银员.png" />
        <div class="user_name">{{ userState.userInfo.username }}</div>
        <div class="work_id">工号：{{ userState.userInfo.username_num }}</div>
        <div class="time flex_center_center">
          <div class="time_txt">9</div>
          <div class="time_icon">:</div>
          <div class="time_txt">00</div>
          <div class="time_icon">-</div>
          <div class="time_txt">{{ time1.slice(0, 2) }}</div>
          <div class="time_icon">:</div>
          <div class="time_txt">{{ time1.slice(3) }}</div>
        </div>
      </div>

      <div class="work_info">
        <div class="item">
          <div class="left">类型</div>
          <div class="center">笔数</div>
          <div class="right">金额</div>
        </div>

        <div class="item card">
          <div class="left">销售金额</div>
          <div class="center">{{ orderData.order_num }}</div>
          <div class="right">￥{{ orderData.order_price }}</div>
        </div>

        <div class="item card">
          <div class="left">现金收款</div>
          <div class="center">{{ orderData.order_cash_num }}</div>
          <div class="right">￥{{ orderData.order_cash_price }}</div>
        </div>

        <!-- <div class="item card">
          <div class="left">退款金额</div>
          <div class="center">{{ orderData.order_refund_num }}</div>
          <div class="right">￥{{ orderData.order_refund_price }}</div>
        </div> -->
      </div>

      <div class="btn_box">
        <el-button
          color="#FD6013"
          class="btn"
          type="primary"
          @click="handleLogout"
          >交班</el-button
        >
      </div>
    </div>
  </div>

  <div @click="printPdf" id="invoice" class="invoice" style="display: none">
    <div class="details">
      <p style="font-size: 16px; font-weight: bold; margin-left: 100px">
        {{ orderData.logo_title }}交班记录
      </p>
      <div style="font-size: 12px">
        店名：{{ userState.userInfo.store_name }}
      </div>
      <div style="font-size: 12px">
        收银员：{{ userState.userInfo.username }}
      </div>
      <div style="font-size: 12px">
        开始时间：{{ formatTimestamp(orderData.start_time) }}
      </div>
      <div style="font-size: 12px">
        结束时间：{{ year }}-{{ date }} {{ time1 }}
      </div>
    </div>
    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>
    <div style="display: flex; font-size: 12px; font-weight: bold">
      <div style="width: 6%">销售金额</div>
      <div style="width: 2.5%; text-align: center">
        {{ orderData.order_num }}笔
      </div>
      <div style="width: 5%; text-align: center">
        {{ orderData.order_price }}元
      </div>
    </div>

    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>

    <div style="display: flex; font-size: 12px; font-weight: bold">
      <div style="width: 6%">现金收款</div>
      <div style="width: 2.5%; text-align: center">
        {{ orderData.order_cash_num }}笔
      </div>
      <div style="width: 5%; text-align: center">
        {{ orderData.order_cash_price }}元
      </div>
    </div>

    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>

    <div style="display: flex; font-size: 12px; font-weight: bold">
      <div style="width: 6%">微信收款</div>
      <div style="width: 2.5%; text-align: center">
        {{ orderData.order_wx_num }}笔
      </div>
      <div style="width: 5%; text-align: center">
        {{ orderData.order_wx_price }}元
      </div>
    </div>

    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>

    <div style="display: flex; font-size: 12px; font-weight: bold">
      <div style="width: 6%">支付宝收款</div>
      <div style="width: 2.5%; text-align: center">
        {{ orderData.order_zfb_num }}笔
      </div>
      <div style="width: 5%; text-align: center">
        {{ orderData.order_zfb_price }}元
      </div>
    </div>

    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>

    <div style="display: flex; font-size: 12px; font-weight: bold">
      <div style="width: 6%">会员收款</div>
      <div style="width: 2.5%; text-align: center">
        {{ orderData.order_vip_num }}笔
      </div>
      <div style="width: 5%; text-align: center">
        {{ orderData.order_vip_price }}元
      </div>
    </div>

    <div
      style="
        height: 1px;
        width: 400px;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    ></div>

    <p style="font-size: 12px; margin-left: 75px">
      {{ orderData.code_title }}
    </p>
    <!-- <div style="margin-left: 78px">
      <img width="120px" :src="orderData.code_img" alt="" />
    </div> -->
    <!-- <div style="margin-top: 30px; font-size: 12px; margin-left: 65px">
      {{ orderData.store_mobile }}
    </div> -->
    <div style="font-size: 12px; margin-left: 75px">
      {{ orderData.store_title }}
    </div>
    <div style="font-size: 12px; margin-left: 40px">
      {{ orderData.store_site }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { logout, getData } from "../../api/user";
import router from "../../router/index.js";
import { useUserStore } from "../../store/modules/user";
import { ElMessage } from "element-plus";
import { getLodop } from "../../utils/LodopFuncs.js";
import { formatTimestamp } from "../../utils/common.js";

const userState = useUserStore();

// lodop => 打印
const printPdf = () => {
  let LODOP = getLodop();
  if (!LODOP) {
    console.error("");
    return;
  }
  LODOP.PRINT_INIT("标签");
  LODOP.SET_PRINT_STYLE("FontSize", 16);
  LODOP.SET_PRINT_STYLE("Bold", 1);

  LODOP.SET_PRINT_PAGESIZE(3, 1200, 0, "");
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, "");

  let printHtml = document.getElementById("invoice")?.innerHTML;
  if (!printHtml) {
    console.error("1");
    return;
  }
  LODOP.ADD_PRINT_HTM(0, 0, 1980, 2870, printHtml);
  LODOP.SET_PRINT_STYLEA(0, "QRCodeErrorLevel", "M");
  LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);

  // LODOP.SET_PRINT_STYLEA(0, "ESCCmd", "\x1B\x70\x00\x19\x19");
  LODOP.PRINT();
  // LODOP.PRINT_DESIGN();
  // LODOP.PREVIEW();
};

const time = ref();
const orderData = ref({
  order_num: 0,
  order_price: 0,
  order_refund_num: 0,
  order_refund_price: 0,
});
onMounted(async () => {
  try {
    const res = await getData();
    orderData.value = res.data;
    time.value = res.time;
  } catch (e) {
    console.error(e);
  }
});

const time1 = ref("");
const date = ref("");
const year = ref("");
const day = ref("");

const updateTime = () => {
  const now = new Date();
  time1.value = now.toLocaleTimeString("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
  });

  date.value = `${now.getMonth() + 1}-${now.getDate()}`;
  year.value = `${now.getFullYear()}`;
  day.value = now.toLocaleDateString("zh-CN", { weekday: "long" });
};

let timer;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});

const handleLogout = async () => {
  // 清空缓存信息
  // localStorage.clear();
  sessionStorage.clear();
  try {
    const logoutData = await logout();
    if (logoutData.code === 1) {
      userState.saveToken("");
      ElMessage("交班成功！");
      localStorage.removeItem("goodsList");
      router.push("/login");
      nextTick(() => printPdf());
    }
  } catch (e) {
    console.log(e);
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";

.content {
  padding: 0.5vh 25vw 0 27vw;

  .header,
  .main {
    width: 100%;
    border-radius: $box-radius;
  }

  .header {
    height: 15vh;
    // background: url("src/assets/images/交班.png") no-repeat center center;
    // background-size: 100%;
  }

  .main {
    position: relative;
    margin-top: 7px;
    height: 73vh;
    background: white;
    padding: 4vw 0;

    .avatar,
    .user_info {
      display: flex;
      justify-content: center;
    }

    .user_info {
      .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 70px;
        height: 70px;
      }

      flex-direction: column;
      align-items: center;
      padding-bottom: 2vh;
      border-bottom: 1px solid #eef2f5;

      .user_name {
        letter-spacing: 0.2vw;
        margin-top: 0.8vh;
        font-weight: 800;
        font-size: 1vw;
        color: #333333;
      }

      .work_id {
        font-weight: 400;
        font-size: 0.8vw;
        color: #999999;
      }

      .work_id,
      .time {
        margin-top: 1vh;
      }

      .time {
        text-align: center;

        .time_txt,
        .time_icon {
          padding: 1px 4px;
          // width: 18px;
          height: 18px;

          border-radius: 3px 3px 3px 3px;
          font-weight: bold;
          font-size: 12px;
        }

        .time_txt {
          background: #6374d8;
          color: #ffffff;
        }
      }
    }

    .work_info {
      padding: 2vh 4vw;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        font-size: 1vw;
        color: #999999;
        margin: 3vh 0 2vh 0;
        padding: 0 1vw 0 1vw;

        .left,
        .right {
          width: 80px;
          white-space: nowrap;
        }

        .center {
          width: 30px;
          text-align: center;
          white-space: nowrap;
        }

        .right {
          text-align: right;
        }
      }

      .card {
        font-weight: bold;
        font-size: 1vw;
        color: #333333;
        margin: 0 0 1vh 0;
        background: #eef2f5;
        border-radius: $box-radius;
        padding: 1vw;
      }
    }

    .btn_box {
      display: flex;
      justify-content: center;

      .btn {
        width: 15%;
        color: white;
        margin-top: 5vh;
      }
    }
  }
}
</style>
